<template>
	<uv-popup ref="popup" mode="bottom" round="20">
		<view class="popup-content">
			<!-- 标题 -->
			<view class="flex-between">
				<view class="popup-title">
					筛选
				</view>
				<!-- 关闭按钮 -->
				<image src="@/static/receive/close_icon.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"
					@click="popup.close()"></image>
			</view>

			<!-- 主体搜索项 -->
			<view class="popup-center">
				<view class="orderType-box" v-for="(item, index) in searchList" :key="index">
					<view class="title">
						{{ item.label }}
					</view>
					<view class="tag-box">
						<view :class="{ 
									'tag-item': true,
									'active': searchParams[item.keyPairs]?.id === i.id
								}" v-for="(i, j) in item.gamesSearchList" :key="j" @click="handleClick(item, i)">
							{{ i.dictName === '默认' ? i.dictName : i.searchName ?? i.dictLabel }}
						</view>
					</view>
				</view>
				<!-- 王者荣耀专属订单类型 -->
				<view class="orderType-box" v-if="gamesInfoObj?.code==='001'">
					<view class="title">
						{{ OrderVicariousTypeInfo.dictName }}
					</view>
					<view class="tag-box">
						<view :class="{ 
									'tag-item': true,
									'active': searchParams[OrderVicariousTypeInfo.dictType] === i.dictValue
								}" v-for="(i, j) in OrderVicariousTypeInfo?.ruleDictDataList" :key="j"
							@click="searchParams[OrderVicariousTypeInfo.dictType] = i.dictValue">
							{{ i.dictName === '默认' ? i.dictName : i.dictLabel  }}
						</view>
					</view>
				</view>

				<!-- 保证金 -->
				<view class="orderType-box">
					<view class="title">
						{{ amountTag.searchName }}
					</view>
					<view class="input-box">
						<uv-input placeholder="请输入内容" inputAlign="center" border="none" v-model="searchParams[amountTag.keyValue]"
							clearable :customStyle="{height:'84rpx'}"></uv-input>
						<!-- <input type="number" placeholder="请输入内容" v-model="searchParams[amountTag.keyValue]" adjust-position="false" style="height: 100%;"/> -->
						<!-- <text class="uni-icon" v-if="showClearIcon" @click="clearIcon">&#xe434;</text> -->
					</view>
				</view>
				<!-- 验收时长 -->
				<view class="orderType-box">
					<view class="title">
						{{ checkTime.dictName }}
					</view>
					<view class="tag-box">
						<view :class="{ 'tag-item': true, 'active': searchParams.checkTime === i.dictValue }"
							v-for="(i, j) in checkTime.ruleDictDataList" :key="j" @click="searchParams.checkTime = i.dictValue">
							{{ i.dictLabel ?? i.dictName }}
						</view>
					</view>
				</view>
				<!-- 客服介入率 -->
				<view class="orderType-box">
					<view class="title">
						{{ interventionRate.dictName }}
					</view>
					<view class="tag-box">
						<view :class="{'tag-item': true, 'active': searchParams.interventionRate === i.dictValue }"
							v-for="(i, j) in interventionRate.ruleDictDataList" :key="j"
							@click="searchParams.interventionRate = i.dictValue">
							{{ i.dictLabel ?? i.dictName }}
						</view>
					</view>
				</view>
			</view>
			<view class="btn-box">
				<view class="btn1" @click="reset">重置</view>
				<view class="btn2" @click="submit">确认</view>
			</view>
		</view>

	</uv-popup>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		nextTick,
		watch
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		gamesSearchApi,
		GetSearchTimeListApi
	} from '@/api/modules/orders.js'
	import {
		GetGamesHeroApi
	} from '@/api/modules/send.js'

	const emits = defineEmits(['submit', 'updateActiveStatus'])
	const popup = ref()
	const isShowPop = ref(false)
	const searchParams = ref({})
	const searchList = ref([])
	const checkTime = ref({}) //验收时长
	const interventionRate = ref({}) //介入率
	const OrderVicariousTypeInfo = ref({})

	//保证金
	const amountTag = {
		searchName: '保证金',
		keyValue: 'cashDeposit'
	}


	const handleClick = (item, value) => {
		searchParams.value[item.keyPairs] = {
			start: Number(value.start) || '',
			end: Number(value.end) || '',
			id: value.id
		}
	}


	//重置
	const defaultStart = ref('')
	const defaultEnd = ref('')
	const reset = () => {
		isInit.value = true
		searchParams.value = {}
		emits("updateActiveStatus", false)
		emits('submit', {
			"checkTime": 0,
			"orderVicariousType": 0,
			"interventionRate": 0,
			"amount": {
				"dictName": "默认",
				"id": 0,
				"start": defaultStart.value,
				"end": defaultEnd.value,
				"type": 1
			}
		})
		close()
	}

	const gamesInfoObj = ref()
	const isInit = ref(true) // 	记录是否 第一次进入
	const open = (res) => {
		gamesInfoObj.value = res
		const gamesId = res.gamesId

		//	获取王者订单类型
		if (Object.keys(gamesInfoObj.value).length > 0) {
			if (gamesInfoObj.value.code && gamesInfoObj.value.code === '001') {

				GetSearchTimeListApi({
					name: 'orderVicariousType'
				}).then(({
					data
				}) => {
					OrderVicariousTypeInfo.value = data
					setDefalultVal(data, 'ruleDictDataList', data.dictType)
				}).catch(err => {})

			}
		}

		//	获取验收时长
		const GetCheckTimeFn = () =>
			new Promise((resolve, reject) => {
				GetSearchTimeListApi({
					name: 'check_time'
				}).then(({
					data
				}) => {
					checkTime.value = data
					setDefalultVal(data, 'ruleDictDataList', 'checkTime')
					resolve()
				}).catch(err => {
					reject(err)
				})
			})
		//	获取客服介入率
		const GetInterventionRateFn = () =>
			new Promise((resolve, reject) => {
				GetSearchTimeListApi({
					name: 'intervention_rate'
				}).then(({
					data
				}) => {
					interventionRate.value = data
					setDefalultVal(data, 'ruleDictDataList', 'interventionRate')
					resolve()
				}).catch(err => {
					reject(err)
				})
			})
		//	获取其他信息
		const GetPriceAndOrderTypeFn = () =>
			new Promise((resolve, reject) => {
				gamesSearchApi({
					gamesId
				}).then(({
					data
				}) => {
					data.gamesSearchList?.forEach(item => {
						item.label = item.searchName
						const first = item.gamesSearchList[0]
						const last = item.gamesSearchList[item.gamesSearchList?.length - 1]
						const start = Number(first?.start) ?? ''
						const end = Number(last?.end) ?? ''
						defaultStart.value = start
						defaultEnd.value = end
						setDefalultVal(item.gamesSearchList, null, item.keyPairs, start, end, item
							.type)
					})
					searchList.value = [...data.gamesSearchList]
					resolve()
				}).catch(err => {
					reject(err)
				})
			})

		Promise.all([GetPriceAndOrderTypeFn(), GetCheckTimeFn(), GetInterventionRateFn()]).then(() => {
			isShowPop.value = true
			popup.value.open()
		}).catch(err => {
			// console.log(err)
		})
	}

	function setDefalultVal(data, key, keyPairs, start, end, type) {
		//	新增默认选项
		(key ? data[key] : data).unshift({
			dictName: '默认',
			id: 0,
			start,
			end,
			type
		})

		// 默认选中
		if (isInit.value) {
			searchParams.value[keyPairs] = data?.length > 0 ? data[0] : data[key]?.length > 0 ? data[key][0]?.dictValue : 0
		}
	}

	const close = () => {
		isShowPop.value = false
		popup.value.close()
	}


	//确定
	const submit = () => {
		isInit.value = false
		emits("updateActiveStatus", true)


		let params = uni.$uv.deepClone(searchParams.value)


		for (let i in params) {
			if (typeof(params[i]) === 'string' || typeof(params[i]) === "number") {
				if (params[i] !== 0 && !params[i]) {
					delete params[i];
				}
			} else {
				if (params[i]?.dictName === "默认" || params[i]?.id === 0) {
					delete params[i];
				}
			}
		}
		emits('submit', params)
		close()
	}

	function resetInit() {
		isInit.value = true
		emits("updateActiveStatus", false)
	}

	function getSearchData() {

		let params = uni.$uv.deepClone(searchParams.value)

		for (let i in params) {
			if (typeof(params[i]) === 'string' || typeof(params[i]) === "number") {
				if (params[i] !== 0 && !params[i]) {
					delete params[i];
				}
			} else {
				if (params[i]?.dictName === "默认" || params[i]?.id === 0) {
					delete params[i];
				}
			}
		}
		return params
	}

	defineExpose({
		open,
		close,
		resetInit,
		getSearchData,
		reset
	})
</script>

<style scoped lang="scss">
	.popup-content {
		width: calc(100% - 64rpx);
		padding: 32rpx;
		display: flex;
		flex-direction: column;

		.popup-title {
			font-size: 40rpx;
			color: #222222;
			font-weight: 600;
		}

		.popup-center {
			flex: 1;
			overflow-y: scroll;
			margin-top: 48rpx;
			/* #ifdef H5 */
			max-height: 1230rpx;
			/* #endif */
			/* #ifndef H5 */
			max-height: 890rpx;
			/* #endif */

			.orderType-box {
				margin-bottom: 10rpx;
				margin-top: 10rpx;

				.title {
					font-size: 32rpx;
					color: #222222;
					margin-bottom: 24rpx;
					font-weight: 600;
				}

				.input-box {
					background: #F5F5F5;
					border-radius: 16rpx;
					margin-bottom: 20rpx;
				}

				.tag-box {
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					grid-template-rows: repeat(2, 1fr);

					.tag-item {
						width: 152rpx;
						height: 84rpx;
						background: #F5F5F5;
						border-radius: 16rpx;
						font-size: 28rpx;
						color: #222222;
						margin-bottom: 24rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.active {
						background: rgba(110, 104, 233, 0.15);
						color: #453DE7;
					}
				}

			}
		}

		.btn-box {
			display: flex;
			justify-content: space-between;
			width: 100%;

			.btn1,
			.btn2 {
				width: 335rpx;
				height: 80rpx;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				border: 2rpx solid #6E68E9;
				text-align: center;
				line-height: 80rpx;
				color: #453DE7;
			}

			.btn2 {
				color: #ffffff;
				background: #6E68E9;
			}
		}
	}
</style>